<template>
	<div class="mt-[10px] px-[10px] bg-[#1B2538] rounded-lg text-t-1">
		<!-- 顶部内容区域 -->
		<div class="h-13 flex flex-row items-center cursor-pointer" @click="toggleOpen">
			<!-- 文本内容 -->
			<div
				class="flex-1 md:flex md:items-center flex flex-col md:flex-row justify-center md:justify-start truncate">
				<div class="font-bold truncate max-w-[120px] md:max-w-none flex items-center">
					{{ data.campaignName }}
				</div>
				<div
					class="ml-0 md:ml-[11px] text-t-3 flex items-center w-full max-w-[180px] md:max-w-[400px] truncate">
					{{ inviteLink }}
				</div>
			</div>
			<!-- 收益部分 -->
			<div class="flex items-center text-t-3 md:mr-5">
				<span class="mr-1 whitespace-nowrap">{{ $t('agent.activity.TotalEarnings') }}:</span>
				<up-amount :value="data.totalIncomeLink" :currency="Currency.us"></up-amount>
			</div>
			<!-- 展开图标 -->
			<base-icon
				name="superior"
				size="16"
				class="ml-5 duration-300 text-t-3"
				:class="{ 'rotate-180': open }"></base-icon>
		</div>

		<!-- 展开内容区域 -->
		<transition
			enter-active-class="animate__animated animate__fadeIn"
			leave-active-class="animate__animated animate__fadeOut">
			<div v-show="open" class="border-t-[1px] border-border-1 py-8 px-4">
				<div class="flex flex-col xl:flex-row gap-6">
					<div class="grid grid-cols-2 gap-6 w-full xl:flex xl:flex-row xl:justify-between">
						<!-- 左侧图标 -->
						<div class="flex justify-start items-center xl:w-[40px] xl:mr-6 xl:ml-6">
							<img
								v-if="data.top"
								src="@/assets/img/over.svg"
								alt="icon"
								class="w-[30px] h-[30px]"
								style="cursor: pointer"
								@click="() => handleUp(data)" />
							<img
								v-else
								src="@/assets/img/over-gray.svg"
								alt="icon"
								class="w-[30px] h-[30px]"
								style="cursor: pointer"
								@click="() => handleUp(data)" />
						</div>
						<!-- <div class="flex md:justify-between flex-1 flex-wrap gap-1"></div> -->
						<!-- 注册人数 -->
						<div class="flex flex-col">
							<div class="text-t-3 mb-[8px] whitespace-nowrap">
								{{ $t('agent.activity.Registrations') }}
							</div>
							<div class="text-lg text-left agent-content__textbox">
								{{ getPersonNumber(data.registerCount || 0) }}
							</div>
						</div>

						<!-- 充值玩家 -->
						<div class="flex flex-col">
							<div class="text-t-3 mb-[8px] whitespace-nowrap">
								{{ $t('agent.activity.DepositingPlayers') }}
							</div>
							<div class="text-lg text-left agent-content__textbox">
								{{ getPersonNumber(data.rechargeCount || 0) }}
							</div>
						</div>

						<!-- 总充值金额 -->
						<div class="flex flex-col">
							<div class="text-t-3 mb-[8px] whitespace-nowrap">
								{{ $t('agent.activity.TotalDeposits') }}
							</div>
							<div
								class="text-lg text-left w-[120px] overflow-hidden whitespace-nowrap agent-content__textbox">
								US$ {{ data.totalRecharge }}
							</div>
						</div>

						<!-- 佣金率 -->
						<div class="flex flex-col">
							<div class="text-t-3 mb-[8px] whitespace-nowrap">
								{{ $t('agent.activity.CommisionRate') }}
							</div>
							<div
								class="text-lg text-left w-[80px] overflow-hidden whitespace-nowrap agent-content__textbox">
								{{ data.rebateRate || '0' }}%
							</div>
						</div>

						<!-- 引荐率 -->
						<div class="flex flex-col">
							<div class="text-t-3 mb-[8px]">{{ $t('agent.activity.IntroductionRate') }}</div>
							<div
								class="text-lg text-left w-[80px] overflow-hidden whitespace-nowrap agent-content__textbox">
								{{ data.feeRate || '0' }}%
							</div>
						</div>

						<!-- 推荐链接 -->
						<div class="flex flex-col col-span-2 xl:col-span-1 xl:w-[300px] max-w-[450px]">
							<div class="text-t-3 mb-[8px]">{{ $t('agent.activity.ReferralLink') }}</div>
							<div
								class="h-[34px] flex justify-between items-center px-3 w-full"
								style="border-radius: 8px; background: var(--bg-2131-a-27, #131a27)">
								<div class="mr-1 text-white overflow-hidden whitespace-nowrap overflow-ellipsis">
									{{ inviteLink }}
								</div>
								<base-copy :value="inviteLink"></base-copy>
							</div>
						</div>
					</div>
				</div>
			</div>
		</transition>
	</div>
</template>

<script setup lang="ts">
import { BaseIcon, BaseCopy } from '@/components/base'
import { UpAmount } from '@/components/up'
import { Currency } from '@/enums'
import { ref, defineProps, defineEmits, computed } from 'vue'
import { formatToThousandsWithDecimal } from '@/utils/decimal'
// import { isDesktop } from '@/hooks'
import { topCampaign } from '@/api/agent'
import { useProfileStore } from '@/store'
const profileStore = useProfileStore()

// 添加计算属性获取完整邀请链接
const inviteLink = computed(() => {
	const protocol = location.protocol
	const hostname = location.host
	const inviteCode = props.data.inviteCode || ''
	return `${protocol}//${hostname}?r=${inviteCode}`
})

// 格式化配置选项
// const formatConfig: {
// 	type: 'fiat' | 'crypto' // 法币 or 加密货币
// 	platform: 'pc' | 'h5' // 平台
// } = {
// 	platform: 'h5',
// 	type: 'fiat'
// }

// 数字格式化方法
//const getTotalNumber = (data: number) => formatNumber(data, formatConfig)
const getPersonNumber = (data: number) => formatToThousandsWithDecimal(data, 0)

const props = defineProps({
	data: {
		type: Object,
		required: true
	},
	isTop: {
		type: Boolean,
		default: false
	}
})

const open = ref(false)

const toggleOpen = () => {
	open.value = !open.value
}
// 置顶
const emit = defineEmits(['update:isTop', 'refresh'])
const handleUp = async (row: any) => {
	try {
		const res = await topCampaign({ userId: Number(profileStore.userInfo?.id), id: row.id })
		if (res.data) {
			// emit('update:isTop', { ...row, top: !row.top })
			emit('refresh')
		}
	} catch (error) {
		console.error('置顶失败:', error)
	}
}
</script>

<style scoped>
/* 在全局样式或组样式中添加 */
.agent-content__textbox {
	height: 34px;
	line-height: 34px;
}
</style>
